<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{.title}}</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="/static/css/style.css">
    <link rel="stylesheet" href="/static/css/directory-tree.css">
    <style>
        .tab-content {
            display: none;
        }
        .tab-content.active {
            display: block;
        }
        .highlight {
            background-color: #fef3c7;
            padding: 2px 4px;
            border-radius: 3px;
        }
    </style>
</head>
<body class="bg-gray-50">
    <div class="container mx-auto px-4 py-8 max-w-6xl">
        <!-- 头部 -->
        <header class="mb-8">
            <h1 class="text-3xl font-bold text-gray-800 mb-2">Go文件感知国产模型</h1>
            <p class="text-gray-600">基于Go语言的MCP服务器，实现文件向量索引和智能检索</p>
        </header>

        <!-- 状态信息 -->
        <div class="bg-white rounded-lg shadow-md p-6 mb-8">
            <h2 class="text-xl font-semibold text-gray-800 mb-4">系统状态</h2>
            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                <div class="bg-blue-50 p-4 rounded-lg">
                    <div class="text-blue-800 font-bold text-2xl" id="totalFiles">-</div>
                    <div class="text-blue-600">总文件数</div>
                </div>
                <div class="bg-green-50 p-4 rounded-lg">
                    <div class="text-green-800 font-bold text-2xl" id="indexedFiles">-</div>
                    <div class="text-green-600">已索引文件</div>
                </div>
                <div class="bg-purple-50 p-4 rounded-lg">
                    <div class="text-purple-800 font-bold text-2xl" id="totalChunks">-</div>
                    <div class="text-purple-600">总分块数</div>
                </div>
                <div class="bg-yellow-50 p-4 rounded-lg">
                    <div class="text-yellow-800 font-bold text-2xl" id="indexedChunks">-</div>
                    <div class="text-yellow-600">已索引分块</div>
                </div>
            </div>
        </div>

        <!-- 主功能区 -->
        <div class="bg-white rounded-lg shadow-md p-6">
            <!-- 标签页导航 -->
            <div class="flex border-b border-gray-200 mb-6">
                <button class="tab-btn px-4 py-2 font-medium text-blue-600 border-b-2 border-blue-600" data-tab="index">
                    <i class="fas fa-database mr-2"></i>文件索引
                </button>
                <button class="tab-btn px-4 py-2 font-medium text-gray-600 hover:text-blue-600" data-tab="db-search">
                    <i class="fas fa-database mr-2"></i>智能搜索
                </button>
                <button class="tab-btn px-4 py-2 font-medium text-gray-600 hover:text-blue-600" data-tab="search">
                    <i class="fas fa-search mr-2"></i>文件检索
                </button>
                <button class="tab-btn px-4 py-2 font-medium text-gray-600 hover:text-blue-600" data-tab="settings">
                    <i class="fas fa-cog mr-2"></i>系统设置
                </button>
            </div>

            <!-- 文件索引标签页 -->
            <div id="index-tab" class="tab-content active">
                <h3 class="text-lg font-semibold text-gray-800 mb-4">文件索引管理</h3>
                
                <div class="mb-6">
                    <label class="block text-gray-700 text-sm font-bold mb-2" for="indexDirectories">
                        索引目录
                    </label>
                    <textarea id="indexDirectories" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" rows="3" placeholder="每行一个目录路径"></textarea>
                    <div class="form-text">输入要索引的目录路径，每行一个</div>
                </div>
                
                
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                    <div>
                        <label class="flex items-center">
                            <input type="checkbox" id="recursiveIndex" class="mr-2 leading-tight">
                            <span class="text-gray-700 text-sm font-bold">递归索引子目录</span>
                        </label>
                    </div>
                    <div>
                        <label class="flex items-center">
                            <input type="checkbox" id="forceReindex" class="mr-2 leading-tight">
                            <span class="text-gray-700 text-sm font-bold">强制重新索引</span>
                        </label>
                    </div>
                </div>
                
                <div class="flex items-center">
                    <button id="setIndexDirectoryBtn" class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline mr-2">
                        <i class="fas fa-folder-plus mr-2"></i>设置索引目录
                    </button>
                    <button id="startIndexBtn" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline mr-2">
                        <i class="fas fa-play mr-2"></i>开始索引
                    </button>
                    <button id="getStatusBtn" class="bg-gray-600 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
                        <i class="fas fa-info-circle mr-2"></i>获取状态
                    </button>
                </div>
                
                <div id="indexStatus" class="mt-4 p-4 bg-gray-100 rounded hidden">
                    <h4 class="font-bold text-gray-800 mb-2">索引状态</h4>
                    <div id="indexStatusContent"></div>
                </div>
            </div>



            <!-- 智能搜索标签页 -->
            <div id="db-search-tab" class="tab-content">
                <h3 class="text-lg font-semibold text-gray-800 mb-4">智能文件搜索</h3>
                <p class="text-gray-600 mb-6">基于数据库索引的高效文件搜索，支持正则表达式匹配文件名和路径</p>
                
                <!-- 搜索控制面板 -->
                <div class="bg-gray-50 p-4 rounded-lg mb-6">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <!-- 搜索关键词 -->
                        <div>
                            <label class="block text-gray-700 text-sm font-bold mb-2" for="db-search-pattern">
                                搜索关键词 (支持正则表达式，可选)
                            </label>
                            <input type="text" id="db-search-pattern" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="例如：\.go$|main|config，留空返回所有目录">
                            <p class="text-xs text-gray-500 mt-1">支持正则表达式，匹配文件名和文件路径。留空将返回所有索引过的目录结构</p>
                        </div>
                        
                        <!-- 搜索路径 -->
                        <div>
                            <label class="block text-gray-700 text-sm font-bold mb-2" for="db-search-path">
                                搜索路径 (可选)
                            </label>
                            <input type="text" id="db-search-path" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="留空使用配置的索引目录">
                            <p class="text-xs text-gray-500 mt-1">支持相对路径和绝对路径，留空则搜索所有已索引目录</p>
                        </div>
                    </div>
                    
                    <!-- 搜索按钮 -->
                    <div class="mt-4">
                        <button id="db-search-btn" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
                            <i class="fas fa-search mr-2"></i>搜索文件
                        </button>
                        <button id="db-search-clear-btn" class="bg-gray-500 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline ml-2">
                            <i class="fas fa-eraser mr-2"></i>清空结果
                        </button>
                    </div>
                </div>
                
                <!-- 搜索结果 -->
                <div id="db-search-results" class="hidden">
                    <div class="flex justify-between items-center mb-4">
                        <h4 class="font-bold text-gray-800">搜索结果</h4>
                        <div class="text-sm text-gray-600">
                            <span id="db-search-stats"></span>
                        </div>
                    </div>
                    <div id="db-search-tree-container" class="border rounded-lg p-4 bg-white max-h-96 overflow-auto">
                        <!-- 搜索结果树将在这里显示 -->
                    </div>
                </div>
                
                <!-- 加载状态 -->
                <div id="db-search-loading" class="hidden text-center py-8">
                    <i class="fas fa-spinner fa-spin text-2xl text-blue-600 mb-2"></i>
                    <p class="text-gray-600">正在搜索文件...</p>
                </div>
                
                <!-- 错误信息 -->
                <div id="db-search-error" class="hidden bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded mb-4">
                    <div class="flex">
                        <i class="fas fa-exclamation-triangle mr-2 mt-1"></i>
                        <div>
                            <strong>搜索失败：</strong>
                            <span id="db-search-error-message"></span>
                        </div>
                    </div>
                </div>
                
                <!-- 文件内容显示区域 -->
                <div id="db-search-file-content" class="hidden">
                    <div class="flex justify-between items-center mb-4">
                        <h4 class="font-bold text-gray-800">文件内容</h4>
                        <button id="db-search-close-content-btn" class="text-gray-500 hover:text-gray-700">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                    <div class="bg-gray-50 p-2 rounded mb-2">
                        <span class="text-sm text-gray-600">文件路径：</span>
                        <span id="db-search-current-file-path" class="text-sm font-mono text-blue-600"></span>
                    </div>
                    <div id="db-search-file-content-container" class="border rounded-lg p-4 bg-white max-h-96 overflow-auto">
                        <pre id="db-search-file-content-text" class="whitespace-pre-wrap text-sm"></pre>
                    </div>
                </div>
            </div>

            <!-- 文件检索标签页 -->
            <div id="search-tab" class="tab-content">
                <h3 class="text-lg font-semibold text-gray-800 mb-4">文件检索</h3>
                
                <!-- 搜索类型选择 -->
                <div class="mb-4">
                    <div class="flex space-x-4">
                        <label class="inline-flex items-center">
                            <input type="radio" name="searchType" value="semantic" class="form-radio" checked>
                            <span class="ml-2">语义搜索</span>
                        </label>
                        <label class="inline-flex items-center">
                            <input type="radio" name="searchType" value="regex" class="form-radio">
                            <span class="ml-2">传统搜索(支持正则)</span>
                        </label>
                    </div>
                </div>
                
                <!-- 搜索输入 -->
                <div class="mb-4">
                    <label class="block text-gray-700 text-sm font-bold mb-2" for="searchQuery">
                        搜索查询
                    </label>
                    <input type="text" id="searchQuery" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="输入您要搜索的内容...">
                </div>
                
                <!-- 搜索选项 -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                    <div>
                        <label class="block text-gray-700 text-sm font-bold mb-2" for="searchLimit">
                            结果数量限制
                        </label>
                        <input type="number" id="searchLimit" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" value="10" min="1" max="100">
                    </div>
                    <div>
                        <label class="block text-gray-700 text-sm font-bold mb-2" for="searchThreshold">
                            相似度阈值
                        </label>
                        <input type="number" id="searchThreshold" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" value="0.5" min="0" max="1" step="0.1">
                    </div>
                </div>
                
                <!-- 高级选项 -->
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
                    <div>
                        <label class="block text-gray-700 text-sm font-bold mb-2" for="fileTypes">
                            文件类型（逗号分隔）
                        </label>
                        <input type="text" id="fileTypes" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="例如：.md,.txt,.go">
                    </div>
                    <div>
                        <label class="flex items-center">
                            <input type="checkbox" id="enableDedup" class="mr-2 leading-tight">
                            <span class="text-gray-700 text-sm font-bold">结果文件去重归纳</span>
                        </label>
                        <p class="text-xs text-gray-500 mt-1">启用后，同一文件只显示一次，并显示匹配次数</p>
                    </div>
                    <div id="dedupMultiplierContainer" class="hidden">
                        <label class="block text-gray-700 text-sm font-bold mb-2" for="dedupMultiplier">
                            检索倍数
                        </label>
                        <input type="number" id="dedupMultiplier" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" value="100" min="10" max="1000" step="10">
                        <p class="text-xs text-gray-500 mt-1">去重时扩大检索的倍数，值越大结果越全面</p>
                    </div>
                </div>
                
                <!-- 搜索按钮 -->
                <div class="mb-6">
                    <button id="searchBtn" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
                        <i class="fas fa-search mr-2"></i>搜索
                    </button>
                </div>
                
                <!-- 搜索结果 -->
                <div id="searchResults" class="hidden">
                    <h4 class="font-bold text-gray-800 mb-2">搜索结果</h4>
                    <div id="searchResultsContent" class="space-y-4"></div>
                </div>
            </div>



            <!-- 系统设置标签页 -->
            <div id="settings-tab" class="tab-content">
                <h3 class="text-lg font-semibold text-gray-800 mb-4">系统设置</h3>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- 索引管理 -->
                    <div class="bg-gray-50 p-4 rounded-lg">
                        <h4 class="font-medium text-gray-800 mb-3">索引管理</h4>
                        <p class="text-gray-600 text-sm mb-4">管理系统的索引数据，包括清除所有索引或特定目录的索引。</p>
                        
                        <div class="space-y-3">
                            <button id="clearAllIndexBtn" class="w-full bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
                                <i class="fas fa-trash-alt mr-2"></i>清除所有索引分块
                            </button>
                            
                            <button id="clearDirectoryIndexBtn" class="w-full bg-orange-600 hover:bg-orange-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
                                <i class="fas fa-folder-minus mr-2"></i>清除索引目录分块
                            </button>
                        </div>
                    </div>
                    
                    <!-- 系统信息 -->
                    <div class="bg-gray-50 p-4 rounded-lg">
                        <h4 class="font-medium text-gray-800 mb-3">系统信息</h4>
                        <div class="space-y-2">
                            <div class="flex justify-between">
                                <span class="text-gray-600">服务器状态:</span>
                                <span id="serverStatus" class="text-green-600 font-medium">运行中</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-gray-600">Qdrant状态:</span>
                                <span id="qdrantStatus" class="text-green-600 font-medium">已连接</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-gray-600">当前索引目录:</span>
                                <span id="currentIndexDirectory" class="text-blue-600 font-medium truncate max-w-xs">-</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-gray-600">系统运行时间:</span>
                                <span id="systemUptime" class="text-gray-800 font-medium">-</span>
                            </div>
                        </div>
                        
                        <div class="mt-4">
                            <button id="refreshSystemInfoBtn" class="bg-gray-600 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
                                <i class="fas fa-sync-alt mr-2"></i>刷新系统信息
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 系统配置 -->
                <div class="mt-6">
                    <h4 class="font-medium text-gray-800 mb-3">系统配置</h4>
                    <div class="bg-gray-50 p-4 rounded-lg">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <!-- MCP服务器配置 -->
                            <div>
                                <h5 class="text-md font-medium text-gray-700 mb-3">MCP服务器配置</h5>
                                <div class="space-y-3">
                                    <div>
                                        <label class="block text-gray-700 text-sm font-bold mb-1" for="mcpApiKey">
                                            MCP服务器密钥
                                        </label>
                                        <input type="password" id="mcpApiKey" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="输入MCP服务器密钥">
                                    </div>
                                    <div>
                                        <label class="block text-gray-700 text-sm font-bold mb-1" for="mcpPort">
                                            MCP服务器端口
                                        </label>
                                        <input type="number" id="mcpPort" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="8082">
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Web管理端配置 -->
                            <div>
                                <h5 class="text-md font-medium text-gray-700 mb-3">Web管理端配置</h5>
                                <div class="space-y-3">
                                    <div>
                                        <label class="block text-gray-700 text-sm font-bold mb-1" for="webPort">
                                            Web管理端端口
                                        </label>
                                        <input type="number" id="webPort" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="8080">
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 嵌入向量模型配置 -->
                            <div>
                                <h5 class="text-md font-medium text-gray-700 mb-3">嵌入向量模型配置</h5>
                                <div class="space-y-3">
                                    <div>
                                        <label class="block text-gray-700 text-sm font-bold mb-1" for="bgeApiKey">
                                            嵌入向量模型密钥
                                        </label>
                                        <input type="password" id="bgeApiKey" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="输入嵌入向量模型密钥">
                                    </div>
                                    <div>
                                        <label class="block text-gray-700 text-sm font-bold mb-1" for="bgeHost">
                                            嵌入向量地址
                                        </label>
                                        <input type="text" id="bgeHost" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="localhost">
                                    </div>
                                    <div>
                                        <label class="block text-gray-700 text-sm font-bold mb-1" for="bgePort">
                                            嵌入向量端口号
                                        </label>
                                        <input type="number" id="bgePort" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="8000">
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 向量数据库配置 -->
                            <div>
                                <h5 class="text-md font-medium text-gray-700 mb-3">向量数据库配置</h5>
                                <div class="space-y-3">
                                    <div>
                                        <label class="block text-gray-700 text-sm font-bold mb-1" for="vectorHost">
                                            向量数据库地址
                                        </label>
                                        <input type="text" id="vectorHost" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="localhost">
                                    </div>
                                    <div>
                                        <label class="block text-gray-700 text-sm font-bold mb-1" for="vectorPort">
                                            向量数据库端口号
                                        </label>
                                        <input type="number" id="vectorPort" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="6333">
                                    </div>
                                    <div>
                                        <label class="block text-gray-700 text-sm font-bold mb-1" for="vectorGrpcPort">
                                            向量数据库gRPC端口号
                                        </label>
                                        <input type="number" id="vectorGrpcPort" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="6334">
                                    </div>
                                    <div>
                                        <label class="block text-gray-700 text-sm font-bold mb-1" for="vectorApiKey">
                                            向量数据库密钥
                                        </label>
                                        <input type="password" id="vectorApiKey" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="输入向量数据库密钥">
                                    </div>
                                </div>
                            </div> 
                        </div>
                        
                        <div class="mt-6 flex justify-end">
                            <button id="saveConfigBtn" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
                                <i class="fas fa-save mr-2"></i>保存配置
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 操作结果 -->
                <div id="settingsOperationResult" class="mt-6 p-4 bg-gray-100 rounded hidden">
                    <h4 class="font-bold text-gray-800 mb-2">操作结果</h4>
                    <div id="settingsOperationContent"></div>
                </div>
            </div>
        </div>

        <!-- 页脚 -->
        <footer class="mt-8 text-center text-gray-600 text-sm">
            <p>© 2025 Go文件感知国产模型 - 基于Go语言的MCP服务器</p>
        </footer>
    </div>

    <script src="/static/js/api-client.js" defer></script>
    <script src="/static/js/tab-manager.js" defer></script>
    <script src="/static/js/index-manager.js" defer></script>
    <script src="/static/js/search-manager.js" defer></script>
    <script src="/static/js/directory-manager.js" defer></script>
    <script src="/static/js/directory-tree-manager.js" defer></script>
    <script src="/static/js/db-search-manager.js" defer></script>
    <script src="/static/js/system-manager.js" defer></script>
    <script src="/static/js/modal-manager.js" defer></script>
    <script src="/static/js/app.js" defer></script>
</body>
</html>